<template>
  <div>
    <!-- <h1>6666</h1> -->
  <!-- <van-cell @click="showIt()"> -->
    <van-row>
      <van-col span="20">
        <van-cell-group inset>
          <van-cell @click="showIt()" replace>
        <!-- <h1>播放列表</h1> -->
          <van-row>
          <van-col span="5">
              <!--cd图片 圆形图片 -->
              <van-image
                round
                width="3rem"
                height="3rem"
                :src="this.MusicIcon"
                />   
                
            </van-col>
            <van-col span="19">
              <div style="display:flex; align-items: center; justify-content: flex-start;">
                <h4>歌名: {{MusicName}}</h4> --- <label>作者: {{MusicAuthor}}</label>
              </div>
              <label>{{MusicDescription}}</label>
            
            </van-col>
            
          </van-row>
        </van-cell>
      </van-cell-group>
      </van-col>
      <van-col span="4">
        <!--播放按钮 -->
        <van-icon  size="2rem" @click="playIt"  name="http://rul4y8e5f.hn-bkt.clouddn.com/24gf-playCircle.png" ></van-icon>
      </van-col>
    </van-row>
  
  </div>
</template>

<script>
export default {
name: 'page2musicList',


data() {
  return {
    pageUrl: '',

  }
},
methods:{
  
    showIt(){
  
     this.$router.push({name: "musicAllInfo",
     params:{
      id: this.MusicId
     }
    })
    },
    playIt(){
      this.$bus.$emit("playUrl",this.MusicUrl)
    },
},

mounted(){
  this.pageUrl = this.MusicIcon
},
  props: {
        // 音乐的 id
    // 为啥在这里要封装一个 id 属性呢？
    // 原因:将来,子组件中商品的勾选状态变化之后, 需要通过子 -> 父的形式,
    // 通知父组件根据 id 修改对应商品的勾选状态。
    Id: {
      required: true,
      type: String
    },
    UserId: {
      required: true,
      type: String
    },
    MusicId: {
      required: true,
      type: String
    },
    MusicName: {
      required: true,
      type: String
    },
    
    MusicDescription:{
      required: true,
      type: String
    },
    MusicAuthor: {
      required: true,
      type: String
    },
    MusicIcon: {
      required: true,
      type: String
    },
    MusicUrl: {
      required: true,
      type: String
    }
    
    }

  }


</script>

<style lang="less">

</style>